<template>
	<div class="user-avator-dropdown">
		<Dropdown @on-click="handleClick">
			<span class="img">
        <img src="@/assets/images/logo-min.jpg"/>
      </span>
			<Icon :size="18" type="md-arrow-dropdown"></Icon>
			<DropdownMenu slot="list">
				<DropdownItem name="logout">退出登录</DropdownItem>
				<DropdownItem name="xiugai">修改密码</DropdownItem>
				<DropdownItem name="shenhe" v-show="Review && !havePassword">设置审核密码</DropdownItem>
				<DropdownItem name="updateShenhe" v-show="Review && havePassword">修改审核密码</DropdownItem>
				<DropdownItem name="chongzhi" v-show="Review2 && !havePassword2">设置充值密码</DropdownItem>
				<DropdownItem name="updateChongzhi" v-show="Review2 && havePassword2">修改充值密码</DropdownItem>
			</DropdownMenu>
		</Dropdown>

		<Modal v-model="modal1" title="修改密码" width='40%'>
			<Form :label-width="100" :model="form" ref="confirmForm" :rules="rules">
				<FormItem label="原密码" prop="originPassword">
					<Input class="w-50" type="password" placeholder="请输入旧密码" v-model="form.originPassword" />
				</FormItem>
				<FormItem label="密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入新密码" v-model="form.newPassword" />
				</FormItem>
				<FormItem label="确认密码" prop="confirmPassword">
					<Input class="w-50" type="password" placeholder="请确认密码" v-model="form.confirmPassword" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="form.originPassword='';form.newPassword='';form.confirmPassword='';modal1 = false">取消</Button>
				<Button type="primary" size="large" @click="confirm">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal2" title="设置审核密码" width='40%'>
			<Form :label-width="100" :model="form2" ref="confirmForm2" :rules="rules2">
				<FormItem label="设置审核密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入审核密码" v-model="form2.newPassword" />
				</FormItem>
				<FormItem label="确认审核密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入审核密码" v-model="form2.confirmPassword" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="form2.newPassword='';form2.confirmPassword='';modal2 = false">取消</Button>
				<Button type="primary" size="large" @click="confirm3">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal3" title="修改审核密码" width='40%'>
			<Form :label-width="100" :model="form3" ref="confirmForm3" :rules="rules3">
				<FormItem label="原密码" prop="originPassword">
					<Input class="w-50" type="password" placeholder="请输入旧密码" v-model="form3.originPassword" />
				</FormItem>
				<FormItem label="新密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入新密码" v-model="form3.newPassword" />
				</FormItem>
				<FormItem label="确认密码" prop="confirmPassword">
					<Input class="w-50" type="password" placeholder="请确认密码" v-model="form3.confirmPassword" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="form3.originPassword='';form3.newPassword='';form3.confirmPassword='';modal3 = false">取消</Button>
				<Button type="primary" size="large" @click="confirm2">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal4" title="设置充值密码" width='40%'>
			<Form :label-width="100" :model="form4" ref="confirmForm4" :rules="rules4">
				<FormItem label="设置充值密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入充值密码" v-model="form4.newPassword" />
				</FormItem>
				<FormItem label="确认充值密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入充值密码" v-model="form4.confirmPassword" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="form4.newPassword='';form4.confirmPassword='';modal4 = false">取消</Button>
				<Button type="primary" size="large" @click="confirm4">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal5" title="修改充值密码" width='40%'>
			<Form :label-width="100" :model="form5" ref="confirmForm5" :rules="rules5">
				<FormItem label="原密码" prop="originPassword">
					<Input class="w-50" type="password" placeholder="请输入旧密码" v-model="form5.originPassword" />
				</FormItem>
				<FormItem label="新密码" prop='newPassword'>
					<Input class="w-50" type="password" placeholder="请输入新密码" v-model="form5.newPassword" />
				</FormItem>
				<FormItem label="确认密码" prop="confirmPassword">
					<Input class="w-50" type="password" placeholder="请确认密码" v-model="form5.confirmPassword" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="form5.originPassword='';form5.newPassword='';form5.confirmPassword='';modal5 = false">取消</Button>
				<Button type="primary" size="large" @click="confirm5">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import './user.less'
	import { mapActions } from 'vuex'
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入新密码'))
				} else {
					if(this.form.confirmPassword !== '') {
						// 对第二个密码框单独验证
						this.$refs.confirmForm.validateField('confirmPassword')
					}
					callback()
				}
			}
			const validatePassCheck = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入新密码'))
				} else if(value !== this.form.newPassword) {
					callback(new Error('两次输入密码不一致！'))
				} else {
					callback()
				}
			}
			return {
				modal1: false,
				modal2: false,
				modal3: false,
				modal4: false,
				modal5: false,
				Review: localStorage.Review == 'false' ? false : true,
				Review2: localStorage.Review == 'false' ? false : true,
				havePassword: false,
				havePassword2: false,
				form: {
					originPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				form2: {
					newPassword: '',
					confirmPassword: ''
				},
				form3: {
					originPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				form4: {
					newPassword: '',
					confirmPassword: ''
				},
				form5: {
					originPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				rules: {
					originPassword: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					}],
					newPassword: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					confirmPassword: [{
						validator: validatePassCheck,
						trigger: 'blur'
					}]
				},
				rules2: {
					newPassword: [{
						required: true,
						message: '请输入审核密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: '请确认审核密码',
						trigger: 'blur'
					}]
				},
				rules3: {
					originPassword: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: '请确认密码',
						trigger: 'blur'
					}]
				},
				rules4: {
					newPassword: [{
						required: true,
						message: '请输入充值密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: '请确认充值密码',
						trigger: 'blur'
					}]
				},
				rules5: {
					originPassword: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: '请确认密码',
						trigger: 'blur'
					}]
				}
			}
		},
		name: 'User',
		methods: {
			...mapActions(['handleLogOut']),
			logout() {

			},
			handleClick(name) {
				switch(name) {
					case 'logout':
						this.handleLogOut().then(() => {
							let token = localStorage.getItem('mytoken');
							this.axios
								.post('admin/index/signOut', {
									headers: {
										Authorization: 'bearer ' + token
									}
								})
								.then(res => {
									// console.log(res);
									if(res.data.code == 200) {
										this.$Message.info(res.data.msg)
										sessionStorage.clear();
										localStorage.removeItem('mytoken')
										this.$router.push({
											name: 'login'
										})
									}
								})
						})
						break;
					case 'xiugai':
						this.handleLogOut().then(() => {
							this.modal1 = true;
						})
						break;
					case 'shenhe':
						this.modal2 = true;
						break;
					case 'updateShenhe':
						this.modal3 = true;
						break;
					case 'chongzhi':
						this.modal4 = true;
						break;
					case 'updateChongzhi':
						this.modal5 = true;
						break;
				}
			},
			confirm() {
				this.$refs.confirmForm.validate(valid => {
					if(valid) {
						let params = this.qs.stringify({
							oldPassword: this.form.originPassword,
							newPassword: this.form.newPassword,
							confirmPassword: this.form.confirmPassword
						})
						let token = localStorage.getItem('mytoken');
						this.axios.post('/admin/index/admin/updatePassword', params, {
								headers: {
									Authorization: 'bearer ' + token
								}
							})
							.then(res => {
								if(res.data.code == 200) {
									this.form.originPassword = '';
									this.form.newPassword = '';
									this.form.confirmPassword = '';
									this.$Message.info(res.data.msg)
									localStorage.removeItem('mytoken')
									this.$router.push({
										name: 'login'
									})
								}
							})
					}
				})
			},
			confirm2() {
				let params = this.qs.stringify({
					oldPass: this.form3.originPassword,
					auditPass: this.form3.newPassword,
					confirmPass: this.form3.confirmPassword
				})
				this.axios.put('/admin/accounting/withdraw/audit/setPass', params)
					.then(res => {
						if(res.data.code == 200) {
							this.form3.originPassword = '';
							this.form3.newPassword = '';
							this.form3.confirmPassword = '';
							this.$Message.info(res.data.msg);
							this.modal3 = false;
						}
					})
			},
			confirm3() {
				let params = this.qs.stringify({
					auditPass: this.form2.newPassword,
					confirmPass: this.form2.confirmPassword
				})
				let token = localStorage.getItem('mytoken');
				this.axios.post('/admin/accounting/withdraw/audit/setPass', params)
					.then(res => {
						if(res.data.code == 200) {
							this.form2.newPassword = '';
							this.form2.confirmPassword = '';
							this.havePassword = true;
							this.$Message.info(res.data.msg);
							this.modal2 = false;
						}
					})
			},
			confirm4() {
				let params = this.qs.stringify({
					rechargePass: this.form4.newPassword,
					confirmPass: this.form4.confirmPassword
				})
				let token = localStorage.getItem('mytoken');
				this.axios.post('/admin/account/member/rechargeAccount/pass', params)
					.then(res => {
						if(res.data.code == 200) {
							this.form4.newPassword = '';
							this.form4.confirmPassword = '';
							this.$Message.info(res.data.msg);
							this.modal4 = false;
							this.havePassword2 = true;
						}
					})
			},
			confirm5() {
				let params = this.qs.stringify({
					oldPass: this.form5.originPassword,
					rechargePass: this.form5.newPassword,
					confirmPass: this.form5.confirmPassword
				})
				this.axios.put('/admin/account/member/rechargeAccount/pass', params)
					.then(res => {
						if(res.data.code == 200) {
							this.form5.originPassword = '';
							this.form5.newPassword = '';
							this.form5.confirmPassword = '';
							this.$Message.info(res.data.msg);
							this.modal5 = false;
						}
					})
			},
		},
		mounted() {
			this.$Message.config({
				top: 250
			})

			this.axios.get('/admin/accounting/withdraw/audit/pass').then(res => {
				if(res.data.code == 200) {
					if(res.data.data) {
						this.havePassword = true;
						this.Review = true;
					}
				}
			})

			this.axios.get('/admin/account/member/rechargeAccount/pass').then(res => {
				if(res.data.code == 200) {
					if(res.data.data) {
						this.havePassword2 = true;
						this.Review2 = true;
					}
				}
			})
		}
	}
</script>

<style lang="less">
	.img {
		display: inline-block;
		text-align: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		vertical-align: middle;
		width: 32px;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		img {
			width: 100%;
		}
	}
</style>